<template>
  <div>
    <div class="navMarginTop allBackground" :style="{ height: screenHeightBg }">
      <div class="DistrCotBox">
        <div class="DistrCot">
          <div class="h6">佣金提现</div>
          <a-spin :spinning="confirmLoading">
            <j-form-container>
              <a-form-model ref="form" :model="model" slot="detail" :rules="validatorRules">
                <a-row>
                  <a-col :span="24">
                    <a-form-model-item
                      label="提现金额"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="withdrawalMoney"
                    >
                      <a-input v-model="model.withdrawalMoney" placeholder="请输入提现金额"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="提现方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
                      <a-radio-group name="tenantStatus" v-model="model.type">
                        <a-radio :value="1"
                          ><div class="isSelect">
                            <img src="@assets/chat/wechat_qrcode.png" alt="" />微信收款码
                          </div></a-radio
                        >
                        <a-radio :value="2"
                          ><div class="isSelect">
                            <img src="@assets/chat/ali_qrcode.png" alt="" />支付宝收款码
                          </div></a-radio
                        >
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item
                      label="微信账号"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="wechatAccount"
                    >
                      <a-input v-model="model.wechatAccount" placeholder="请输入微信账号"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="真实姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
                      <a-input v-model="model.realname" placeholder="请输入真实姓名"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="收款二维码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="image">
                      <div class="flex">
                        <j-image-upload bizPath="withdrawal/pic" v-model="model.image"></j-image-upload>
                        （上传二维码图片）
                      </div>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24" style="text-align: center">
                    <a-button @click="submitForm" type="primary">提 交</a-button>
                  </a-col>
                </a-row>
              </a-form-model>
            </j-form-container>
          </a-spin>
        </div>

      </div>
    </div>
    <global-footer />
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import GlobalFooter from '@/components/page/GlobalFooter'
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'WithDrawal',
  mixins: [ mixinDevice],
  components: {
    GlobalFooter,
  },
  props: {},
  data() {
    return {
      model: { type: 1 },
      screenWidth: '',
      screenHeight: '',
      screenHeightBg: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        withdrawalMoney: [{ required: true, message: '请输入提现金额!' }, { validator: this.validateMobile }],
        wechatAccount: [{ required: true, message: '请输入微信账号!' }],
        realname: [{ required: true, message: '请输入真实姓名!' }],
        image: [{ required: true, message: '请上传收款码!',trigger:'change' }],
      },

    }
  },
  created() {},
  computed: {},

  mounted() {
    this.$nextTick(function () {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.screenHeightBg = this.screenHeight - 120 + 'px'
    })
  },
  methods: {
    // 校验相片
    validateImage(){
      if (!value) {
        callback()
      } else {
        callback('请输入!')
      }
    },
    // 校验金额
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^[1-9]\d*$/).test(value)) {
        callback()
      } else {
        callback('您的金额格式不正确!')
      }
    },
    submitForm() {
      const that = this
      // 触发表单验证
      that.$refs.form.validate((valid) => {
        if (valid) {
          var that = this
          // var img = that.model.image.split('/')
          // let imgUrl = ''
          // img.forEach((items,index) => {
          //   if(index === 0){
          //     items = 'withdrawal'
          //   }
          //   imgUrl += items + '/'
          // });
          // console.log("imgUrl",imgUrl)
          // const data = JSON.parse(JSON.stringify(that.model))
          // data.image = imgUrl.substring(0,imgUrl.length - 1)
          that.$confirm({
            title: '佣金提现',
            content: '是否提交佣金体现?',
            onOk: function () {
              that.confirmLoading = true
              that.$http
                .post('/withdrawal/api/submit', that.model)
                .then((res) => {
                  console.log('res', res)
                  if(res.success){
                    that.$message.success(res.message)
                  }else{
                    that.$message.error(res.message)
                  }
                
                })
                .catch((error) => {
                  console.log('error', error)
                  that.$message.error(res.message)
                })
                .finally(() => {
                  that.confirmLoading = false
                })
            },
          })
        } else {
          return false
        }
      })
    },

    apiPackageRechargeL() {
      getAction('/packagerecharge/packageRecharge/list')
        .then((res) => {
          console.log('res', res)
          this.redisInfo = res.result.records
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
.DistrCotBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  .DistrCot {
    margin-bottom: 30px;
    float: left;
    width: 100%;
    .h6 {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 25px;
      color: black;
    }
  }
  /deep/.ant-radio-wrapper {
    border: 1px solid #e5e5e5;
    padding: 9px 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    float: left;
    .ant-radio {
      display: none;
    }
    img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    &.ant-radio-wrapper-checked {
      border: 1px solid #00abff;
    }
  }
}

@media screen and (max-width: 767px) {
}
</style>